import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:ball_lion/resources/colours.dart';

class LadderTab extends StatelessWidget {
  const LadderTab(
      {super.key,
      required this.child,
      required this.place,
      required this.height,
      required this.color,
      this.keepSize = true,
      required this.scrollable});
  final Widget child;
  final TabPlace place;
  final double height;
  final Color color;
  final bool keepSize;
  final bool scrollable;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: height,
      child: Stack(
        children: [
          Positioned.fill(
            right: place == TabPlace.end
                ? height * 6 / 7 - 1
                : height * 3 / 7 * 2 - 0.5,
            left: place == TabPlace.start
                ? height * 6 / 7 - 15
                : height * 3 / 7 * 2 - 0.5,
            child: Container(color: color),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              if (color != Colours.transparent || keepSize)
                if (place == TabPlace.start) ...[
                  ClipRRect(
                    borderRadius:
                        const BorderRadius.only(topLeft: Radius.circular(8)),
                    child: Container(
                      width: height * 3 / 7,
                      height: height,
                      decoration: BoxDecoration(
                          color: color,
                          border: Border.all(color: color, width: 0)),
                    ),
                  )
                ] else ...[
                  SizedOverflowBox(
                    alignment: Alignment.topRight,
                    size: Size(height * 6 / 14, height),
                    child: LadderSide(
                        reverse: true,
                        child: Container(
                          width: height * 6 / 7,
                          height: height,
                          decoration: BoxDecoration(
                              color: color,
                              border: Border.all(color: color, width: 0)),
                        )),
                  )
                ],
              if (scrollable)
                Flexible(
                  child: Container(
                      height: height,
                      decoration: BoxDecoration(
                          color: color,
                          border: Border.all(color: color, width: 0)),
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [child])),
                ),
              if (!scrollable)
                Expanded(
                  child: Container(
                      height: height,
                      decoration: BoxDecoration(
                          color: color,
                          border: Border.all(color: color, width: 0)),
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [child])),
                ),
              if (color != Colours.transparent || keepSize)
                if (place == TabPlace.end) ...[
                  ClipRRect(
                    borderRadius:
                        const BorderRadius.only(topRight: Radius.circular(8)),
                    child: Container(
                      width: height * 3 / 7,
                      height: height,
                      decoration: BoxDecoration(
                          color: color,
                          border: Border.all(color: color, width: 0)),
                    ),
                  )
                ] else ...[
                  LadderSide(
                      reverse: false,
                      child: Container(
                          width: height * 6 / 7,
                          height: height,
                          decoration: BoxDecoration(
                              color: color,
                              border: Border.all(color: color, width: 0))))
                ],
            ],
          ),
        ],
      ),
    );
  }
}

class LadderSide extends StatelessWidget {
  const LadderSide({super.key, required this.child, required this.reverse});
  final Widget child;
  final bool reverse;

  @override
  Widget build(BuildContext context) {
    return ClipPath(clipper: LadderPath(reverse), child: child);
  }
}

class LadderPath extends CustomClipper<Path> {
  final bool reverse;

  LadderPath(this.reverse);

  @override
  Path getClip(Size size) {
    var x = size.height * 6 / 7;
    var y = size.height;
    var path = Path();
    var dot = 1 / 4;
    if (reverse) {
      path.moveTo(x, 0);
    }
    path.quadraticBezierTo(point(x, x * dot), 0, x / 2, y / 2);
    path.quadraticBezierTo(point(x, x * (1 - dot)), y, point(x, x), y);
    path.lineTo(point(x, 0), y);
    path.close();
    return path;
  }

  double point(double x, double point) => reverse ? x - point : point;

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}

class TabPlace {
  final int i;
  TabPlace(this.i);

  static TabPlace start = TabPlace(0);
  static TabPlace middle = TabPlace(1);
  static TabPlace end = TabPlace(2);
}
